<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('新增市政收入报表')"/>
    <th:block th:include="include :: layout-latest-css"/>
    <th:block th:include="include :: ztree-css"/>
    <th:block th:include="include :: datetimepicker-css"/>
    <th:block th:include="include :: select2-css"/>
</head>
<style>
    input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
        -webkit-appearance: none;
    }

    input[type="number"] {
        -moz-appearance: textfield;
    }

    .gray-bg {
        background-color: #FFFFFF;
    }

    form {
        white-space: nowrap;
    }

</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content" id="dv">
    <form class="form-horizontal m" id="add" AUTOCOMPLETE="OFF">
        <input type="hidden" id="companyId" name="companyId">
        <input type="hidden" id="programName" name="programName">
        <input type="hidden" id="programId" name="programId">
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">供应商名称 ：</label>
                    <div class="col-sm-8">
                        <select id="supplierId" name="supplierId" class="form-control">
                            <option value="">请选择</option>
                            <option th:each="name : ${supplierNames}" th:text="${name.dictLabel}"
                                    th:value="${name.dictCode}"></option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">物料名称：</label>
                    <div class="col-sm-8">
                        <select id="materId" name="materId" class="form-control" required>

                        </select>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">税率 ：</label>
                    <div class="col-sm-8">
                        <input id="taxRate" name="taxRate" class="form-control" placeholder="请输入税率"
                               type="number" required>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">规格型号：</label>
                    <div class="col-sm-8">
                        <input id="model" name="model" class="form-control" placeholder="请输入规格型号"
                               type="text" required>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">单位 ：</label>
                    <div class="col-sm-8">
                        <select id="unitNameId" name="unitNameId" class="form-control" required>
                            <option value="">请选择</option>
                            <option th:each="name : ${unitNames}" th:text="${name.dictLabel}"
                                    th:value="${name.dictCode}"></option>
                        </select>
                    </div>
                </div>
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">含税单价：</label>
                    <div class="col-sm-8">
                        <input id="unitPriceTax" name="unitPriceTax" class="form-control" placeholder="请输入含税单价"
                               type="number" required>
                    </div>
                </div>
            </div>
        </div>
        <h4 class="form-header h4">每月一填</h4>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">月份 ：</label>
                    <div class="col-sm-8">
                        <input id="actualMonth" name="actualMonth" class="form-control" placeholder="请选择月份"
                               type="text" required>
                    </div>
                </div>

                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">本期剩余量 ：</label>
                    <div class="col-sm-8">
                        <input id="currentSurplus" name="currentSurplus" value="0" class="form-control"
                               placeholder="请输入本期剩余量"
                               type="number" readonly>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6">
                    <label class="col-sm-4 control-label">备注 ：</label>
                    <div class="col-sm-8">
                        <textarea id="remark" name="remark" class="form-control"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="form-group">
            <div class="col-sm-12">
                <div class="col-sm-6 previousTotalConsume">

                </div>
                <div class="col-sm-6 previousTotalPrice">

                </div>
            </div>
        </div>
    </form>
</div>


<th:block th:include="include :: footer"/>
<th:block th:include="include :: datetimepicker-js"/>
<th:block th:include="include :: select2-js"/>

<script th:inline="javascript">
    var prefix = ctx + "manage";
    var flag = false;
    $(function () {
        /* 初始化 数据 */
        $("#companyId").val([[${companyId}]]);
        $("#programId").val([[${programId}]]);
        $("#programName").val([[${programName}]]);
        layui.use('laydate', function () {
            var laydate = layui.laydate;
            laydate.render({
                elem: '#actualMonth',
                type: 'month'
            });
        });
    })

    $("#supplierId").change(function () {
        if ($("#supplierId").val() != "") {
            $.ajax({
                url: prefix + '/selectMaterNameByCode?dictCode=' + $("#supplierId").val(),
                success: function (data) {
                    $("#materId").empty();
                    for (var i = 0; i < data.materNames.length; i++) {
                        $("#materId").append('<option value="' + data.materNames[i].id + '">' + data.materNames[i].lable + '</option>');
                    }
                }
            })
        } else {
            $("#materId").empty();
        }

    })

    function submitHandler() {
        if ($("#taxRate").val() > 100) {
            $.modal.alertSuccess('税率不能大于100！！');
            return false
        }
        if ($.validate.form() && $("#supplierId").val() != "" && $("#materId").val() != null && $("#unitNameId").val() != "") {
            var dataList = $("#add").serializeArray();
            var config = {
                url: prefix + '/checKIfFirst',
                type: "post",
                dataType: "json",
                data: dataList,
                success: function (data) {
                    if (Number(data) == 0 && !flag) {
                        $.modal.alertSuccess('首次添加记录的上期累计消耗量和上期累计消耗金额为0！！');
                        $(".previousTotalConsume").empty();
                        $(".previousTotalPrice").empty();
                        $(".previousTotalConsume").append('<label class="col-sm-4 control-label">上期累计消耗量 ：</label>' +
                            '<div class="col-sm-8">' +
                            '  <input id="previousTotalConsume" name="previousTotalConsume" value="0" class="form-control" placeholder="请输入上期累计消耗量"' +
                            '           type="number" readonly required>' +
                            '</div>');
                        $(".previousTotalPrice").append('<label class="col-sm-4 control-label" style="text-align: left;">上期累计<br/>消耗金额 ：</label>' +
                            '<div class="col-sm-8">' +
                            '  <input id="previousTotalPrice" name="previousTotalPrice" value="0" class="form-control" placeholder="请输入上期累计消耗金额"' +
                            '           type="number" readonly  required>' +
                            '</div>');
                        flag = true;
                    } else if (flag || Number(data) > 0) {
                        $.operate.save(prefix + "/saveMater", dataList);
                        parent.refresh();
                    }
                }
            };
            $.ajax(config);
        } else {
            $.modal.alertSuccess('请检查字段有没有填写！！');
        }
    }

</script>
</body>
</html>